<template>
	<div id="CommodityItem">
		<!-- 首页商品列表 -->
		<!-- 两栏布局 -->
		<ul class="Commodityleft">
			<li v-for="(item,index) in HomeCommodity" :key="index"
				@click="$router.push('/home/homedetailed/'+item.product_id)" v-if="index % 2 == 0">
				<ol>
					<li>
						<img :src="item.image" width="100%">
					</li>
					<li>
						<p>{{ item.store_name }}</p>
					</li>
					<li>
						<p><span>￥</span>{{ item.price}}</p>
					</li>
					<li>
						<span>{{ item.merchant.type_name }}</span>
						<span v-show="item.delivery_free">包邮</span>
					</li>
				</ol>
			</li>
		</ul>
		<ul class="Commodityright">
			<li v-for="(item,index) in HomeCommodity" :key="index"
				@click="$router.push('/home/homedetailed/'+item.product_id)" v-if="index % 2 != 0">
				<ol>
					<li>
						<img :src="item.image" width="100%">
					</li>
					<li>
						<p>{{ item.store_name }}</p>
					</li>
					<li>
						<p><span>￥</span>{{ item.price}}</p>
					</li>
					<li>
						<span>{{ item.merchant.type_name }}</span>
						<span v-show="item.delivery_free">包邮</span>
					</li>
				</ol>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			// 首页商品列表
			HomeCommodity: {
				typeof: Array,
				default: []
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#CommodityItem {
		width: 100%;
		display: flex;
		padding-bottom: 140px;

		.Commodityleft,
		.Commodityright {
			width: 48%;

			>li {
				width: 170 * $width;
				border-radius: 7 * $width;
				overflow: hidden;
				background-color: #fff;
				margin-bottom: 12 * $width;
				margin: 6 * $width 15 * $width 10 * $width 12 * $width;

				>ol {
					>li:nth-of-type(1) {
						img {
							height: 170 * $width;
						}


					}

					>li:nth-of-type(2) {
						p {
							padding: 0 6 * $width;
							font-size: 13 * $width;
							color: #282828;
							margin: 5 * $width 0 0 0;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

					>li:nth-of-type(3) {
						padding: 0 10 * $width;

						p {
							color: #f00;
							font-size: 17 * $width;
							font-weight: 700;

							span {
								font-size: 10 * $width;
							}

						}
					}

					>li:nth-of-type(4) {
						padding: 0 10 * $width;
						padding-bottom: 10 * $width;

						span:nth-of-type(1) {
							display: inline-block;
							font-size: 12 * $width;
							width: 60 * $width;
							height: 18 * $width;
							color: #fff;
							text-align: center;
							border-radius: 3 * $width;
							background-color: #f00;
						}

						span:nth-of-type(2) {
							display: inline-block;
							font-size: 12 * $width;
							width: 30 * $width;
							height: 18 * $width;
							color: #ff960d;
							text-align: center;
							border-radius: 3 * $width;
							border: 1 * $width solid #ff960d;
							margin-left: 10 * $width;
						}
					}
				}
			}
		}
	}
</style>
